<template>
	<view class="page-con">
		<view class="content">
			<u-upload @afterRead="afterRead" :multiple="false" :maxCount="1">
				<view v-if="userInfo.avatar" style="width: 130rpx;height: 130rpx;">
					<u-image :src="userInfo.avatar" width="130rpx" height="130rpx" radius="50%"></u-image>
				</view>
				<u-avatar v-else :src="userInfo.avatar" size="130rpx"></u-avatar>
			</u-upload>
			<view style="font-size: 31rpx;color: #ca9c13;margin-top: 10rpx;">更换头像</view>
			<view
				style="display: flex;justify-content: space-between;align-items: center;height: 90rpx;width: 100%;margin-top: 40rpx;">
				<view style="font-weight: bold;font-size: 30rpx;color: #000000;">昵称</view>
				<view>
					<u-input placeholder="请输入昵称" border="none" inputAlign="right" v-model="userInfo.nickname"></u-input>
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view
				style="display: flex;justify-content: space-between;align-items: center;height: 90rpx;width: 100%;margin-top: 40rpx;">
				<view style="font-weight: bold;font-size: 30rpx;color: #000000;">手机号</view>
				<view>{{userInfo.phone}}</view>

			</view>
			<!-- <u-line color="#d8d8d8"></u-line>
			<view
				style="display: flex;justify-content: space-between;align-items: center;height: 90rpx;width: 100%;margin-top: 40rpx;">
				<view style="font-weight: bold;font-size: 30rpx;color: #000000;">绑定人</view>
				<view v-if="userInfo.spreadPhone">{{userInfo.spreadName}} {{userInfo.spreadPhone}}</view>
				<view v-else class="bd-but" @click="show=true">绑定</view>
			</view> -->
			<u-line color="#d8d8d8"></u-line>
			<view style="width: 100%;margin-top: 100rpx;" @click="submitData">
				<u-button type="primary" text="保存" customStyle="height: 70rpx;"></u-button>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" bgColor="transparent" mode="center">
			<view class="pop-con">
				<view class="pop-title" style="display: flex;justify-content: center;">
					<view style="width: 500rpx;">
						<u-input placeholder="请输入手机号" type="number" v-model="phone"></u-input>
					</view>

				</view>
				<view class="pop-but">
					<view class="pop-item" @click="show=false">取消</view>
					<view class="pop-active" @click="cacleOrder">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		editInfoApi,
		bindApi
	} from "@/api"
	import {
		baseUrl
	} from "@/api/request.js"
	export default {
		data() {
			return {
				phone: "",
				show: false,
				imgUrl: '',
				userInfo: {
					avatar: '',
					nickname: '',
					phone: "",
				},
			}
		},
		onLoad(option) {
			this.userInfo = JSON.parse(decodeURIComponent(option.item));
		},
		methods: {
			async cacleOrder() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				await bindApi({
					phone: this.phone
				})
				this.show = false
				uni.showToast({
					title: '绑定成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			async submitData() {
				const res = await editInfoApi({
					nickname: this.userInfo.nickname,
					avatar: this.userInfo.avatar
				})
				uni.navigateBack()
			},
			async afterRead(event) {
				const result = await this.uploadFilePromise(event.file.url)
				this.userInfo.avatar = baseUrl + result
			},
			async uploadFilePromise(url) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							'Authorization': uni.getStorageSync('token'),
							'X-Requested-With': 'XMLHttpRequest'
						},
						success: res => {
							console.log(res);
							if (res.statusCode == 200 && res.data) {
								uni.hideLoading()
								if (res.data) {
									let obj = JSON.parse(res.data);
									if (obj.code === 200) {
										resolve(obj.url)
									} else {
										uni.showToast({
											title: obj.msg,
											icon: "none"
										})
									}
								}
							} else {
								uni.hideLoading()
								uni.$u.toast(res.msg)
							}
						},
						fail: err => {
							console.log(err);
							uni.hideLoading()
							uni.$u.toast(err.msg)
						}

					});
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-con {
		width: 100vw;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		padding-bottom: 0;

	}

	.bd-but {
		border: 1px solid #ca9c13;
		color: #ca9c13;
		font-size: 23rpx;
		padding: 5rpx 25rpx;
		border-radius: 20rpx;
	}
</style>